<template>

	<view class="cityBar ">
		<view class="rows" :style="{height:Pinia.System.statusBarHeight+'px'}"></view>
		<view class="d-flex a-center rows" :style="{height:Pinia.BarHeight+'px'}">
			<view class="iconfont icon-xiangzuo size36 black padding20" @click="$back()"></view>
			<text class="size32 black bold">选择城市</text>
		</view>
		<view class="viewbox auto d-flex a-center m-top20 m-bot20 search">
			<view class="iconfont icon-btn_search color_99 size36"></view>
			<input type="text" class="flex-1 height p-left10 size26 color_33" v-model="searchCity" placeholder="输入城市">
		</view>
	</view>

	<view class="rows" :style="{height:fiexHeight+'px'}"></view>
	<scroll-view scroll-y="true" class="scrollY" :scroll-top="scrolltop" @scroll="scroll"
		:scroll-into-view="scrollintoview" v-show="!searchCity">
		<view class="hotCity">
			<text class="size28 color_99">热门城市</text>
			<view class="row j-sb">
				<block v-for="(item,index) in cityList.hit" :key="index">
					<view class="hot flexac" @click="citySelect(item)">{{item.name}}</view>
				</block>
			</view>
		</view>

		<view class="allCity">
			<view class="row m-top20" :id="`city_${item.name}`" v-for="(item,index) in cityList.result" :key="index">
				<text class="color_99 size28">{{item.name}}</text>
				<view class="cityLi" @click="citySelect(subItem)" v-for="(subItem,subIndex) in item.data"
					:key="subIndex">{{subItem.name}}</view>
			</view>
		</view>
	</scroll-view>

	<view class="cityPostion" v-show="!searchCity">
		<view class="citpost flexac" @click="Togcity(item)" :class="{'active':item.name === scrollname}"
			v-for="(item,index) in cityList.result" :key="index">
			<text class="txt">{{item.name}}</text>
		</view>
	</view>

	<!-- 搜索 -->
	<scroll-view scroll-y="true" class="sarchView" :style="{top:fiexHeight+'px'}" v-if="searchCity">
		<view class="rows" v-if="searchList && searchList.length">
			<view class="cityLi" @click="citySelect(subItem)" v-for="(subItem,subIndex) in searchList" :key="subIndex">
				{{subItem.name}}
			</view>
		</view>
	</scroll-view>

</template>

<script setup>
	import { ref, onBeforeMount, inject, computed } from 'vue';
	import cityData from '@/common/city.json';
	import { usePiniaStore } from '@/store/pinia.js';

	const Pinia = usePiniaStore();
	const { back } = inject('Utils');
	const searchCity = ref('');
	const scrolltop = ref(0);
	const cityList = ref('');
	const scrollname = ref('');
	const scrollintoview = ref('');
	const allData = ref([]);

	onBeforeMount(() => {
		cityList.value = cityData;
		setTimeout(() => {
			cityList.value.result.forEach((item, index) => {
				allData.value = [...allData.value, ...item.data];
				getViewInfo(`#city_${item.name}`).then(res => {
					const result = res.top;
					item.tops = result
				})
			})
		}, 1000)
	})

	const getViewInfo = (selector) => {
		const query = uni.createSelectorQuery().in(this);
		return new Promise((resolve) => {
			query.select(selector).boundingClientRect(data => {
				resolve(data)
			}).exec();
		})
	}

	const Togcity = (item) => {
		scrollintoview.value = `city_${item.name}`
		scrollname.value = item.name;
	}

	const scroll = (e) => {
		const scrollTop = e.detail.scrollTop;
		const result = cityList.value.result;
		for (let i = 0; i < result.length; i++) {
			if (scrollTop >= result[i].tops - fiexHeight.value && i == result.length - 1) {
				scrollname.value = result[i].name;
				break;
			}
			if (scrollTop >= result[i].tops - fiexHeight.value && scrollTop < result[i + 1].tops - fiexHeight.value &&
				i != result
				.length - 1) {
				scrollname.value = result[i].name;
			}
			if (scrollTop < result[0].tops - fiexHeight.value) scrollname.value = '';
		}
	}

	const citySelect = (item) => {
		Pinia.$patch((state) => {
			state.City = item.fullname || item.name
		})
		back();
	}

	const fiexHeight = computed(() => {
		return Pinia.System.statusBarHeight + Pinia.BarHeight + 70
	})

	const searchList = computed(() => {
		if (!allData.value.length || !searchCity.value) return;
		return allData.value.filter(n => n.name.indexOf(searchCity.value) != -1)
	})
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.cityBar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #ffffff;
		z-index: 100;
	}

	.search {
		height: 70rpx;
		background-color: #f3f4f5;
		border-radius: 10rpx;
		overflow: hidden;
		padding: 0 20rpx;
	}

	.scrollY {
		width: 100%;
		height: 100vh;
	}

	.hot {
		width: calc((100% - 60rpx) / 4);
		height: 66rpx;
		position: relative;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.hot::after {
		content: "";
		width: 200%;
		height: 200%;
		box-sizing: border-box;
		border: 1px solid #d6d6d6;
		border-radius: 10rpx;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		transform: scale(.5);
		transform-origin: 0 0;
	}

	.hotCity {
		width: 680rpx;
		padding-left: 30rpx;
	}

	.allCity {
		width: 680rpx;
		padding: 30rpx 0 30rpx 30rpx;
	}

	.cityLi {
		width: 100%;
		padding: 24rpx 0;
		position: relative;
		color: #333;
		font-size: 26rpx;
	}

	.cityLi::after {
		content: "";
		width: 200%;
		height: 200%;
		position: absolute;
		left: 0;
		top: 0;
		border-bottom: 1px solid #d6d6d6;
		transform: scale(.5);
		transform-origin: 0 0;
	}

	.cityPostion {
		position: fixed;
		top: 50%;
		right: 20rpx;
		z-index: 101;
		transform: translate(0, -50%);
	}

	.citpost {
		margin: 14rpx 0;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}

	.txt {
		font-size: 22rpx;
		color: #626262;
	}

	.active {
		background-color: #e9e9e9;
	}

	.sarchView {
		width: 100%;
		background-color: #ffffff;
		padding-left: 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 200;
	}
</style>